<template>
	<div class="screen5-module2-content" ref="content">
		<div class="acimate-box">
			<div class="layout1">
				<div class="shelves-row"><div class="inner"></div></div>
				<div class="track-row" ref="trackRow">
					<div class="machine-box" ref="machine" :style="{left:machinePos+'px'}"></div>
				</div>
				<div class="shelves-row"><div class="inner"></div></div>
			</div>
			<div class="layout2">
				<div class="control-deck-view"></div>
				<div class="small-track-row">
					<div class="inner">
						<div class="small_track-box small_track-box1">
							<img src="@/assets/imgs/screen/down_arrow.png" /> 
						</div>
						<div class="small_track-box small_track-box2">
							<img src="@/assets/imgs/screen/up_arrow.png" /> 
						</div>
					</div>
				</div>
				<div class="road-row"><div class="inner"><div class="forklift-box"></div></div></div>
				<div class="empty-row"></div>
			</div>
		</div>
	</div>
</template>

<script setup>
import { ref, onMounted, onBeforeUnmount, getCurrentInstance, inject } from 'vue'
import { eleResize } from '@/assets/js/utils'

const instance = getCurrentInstance()
const $config = inject('$config')
const $api = inject('$api')

const posLimit = [110,844]  //设备的起始和结束位置
let trackRowWidth = 0;
let machineWidth = 0

let interval = null;
let $view = null;

const machinePos = ref(0)

const calWidth = function(){
	trackRowWidth = instance.refs.trackRow.clientWidth;
	machineWidth = instance.refs.machine.clientWidth;
}

const getMachinePos = function(callback) {
	$api.get('LocationOut',{},{block:'screenCenter'}).then((d)=>{
		let res = d.srmx || posLimit[0]
		if (res<posLimit[0]) res = posLimit[0]
		if (res>posLimit[1]) res = posLimit[1]
		callback && callback(true,res)
	}).catch(()=>{
		callback && callback(false)
	})
}

const drawPos = function(){
	getMachinePos((f,d)=>{
		if (f) {
			calWidth()
			if (trackRowWidth && machineWidth && trackRowWidth>machineWidth) {
				machinePos.value = (trackRowWidth-machineWidth)/(posLimit[1]-posLimit[0])*(d-posLimit[0])
			}
		}
	})
}

const createInterval = function(){
	interval = window.setInterval(drawPos,$config.base.screen.screen5.animateIntervalTime)
}

const createEleResize = function(){
	$view = instance.refs.content
	eleResize.on($view,drawPos)
}

const destoryIntervel = function(){
	try{
		window.clearInterval(interval)
		interval = null
	}catch(e){
		//TODO handle the exception
	}
}

const destroyEleResize = function(){
	try{
		eleResize.off($view,drawPos);
	}catch(e){
		//TODO handle the exception
	}
}

onMounted(()=>{
	drawPos()
	createInterval()
	createEleResize()
})

onBeforeUnmount(()=>{
	destoryIntervel()
	destroyEleResize()
})
</script>

<style scoped lang="scss">
.screen5-module2-content{
	height: 100%;
	box-sizing: border-box;
	background-color: transparent;
	padding: .3em;
	.acimate-box{
		width: 100%;
		height: 100%;
		position: relative;
	}
	.layout1,.layout2{
		position: absolute;
		left: 0;
		width: 100%;
		box-sizing: border-box;
	}
	.layout1{
		height: 75%;
		display: flex;
		flex-direction: column;
		top: 0;
		z-index: 10;
		.track-row{
			flex-shrink: 0;
			height: 15%;
		}
		.shelves-row{
			box-sizing: border-box;
			height: 1px;
			flex-grow: 1;
			.inner{
				height: 100%;
				background-repeat: no-repeat;
				background-image: url(@/assets/imgs/screen/shelves.png);
				background-size: 100% 100%;
			}
		}
		.track-row{
			background-repeat: no-repeat;
			background-image: url(@/assets/imgs/screen/machine_track.png);
			background-position: center; 
			background-size: 100% auto;
			position: relative;
			.machine-box{
				background-repeat: no-repeat;
				background-image: url(@/assets/imgs/screen/machine_green.png);
				background-size: 100% 70%;
				background-position: center; 
				position: absolute;
				top:0;
				height: 100%;
				width: 20%;
			}
		}
	}
	.layout2{
		height: 25%;
		top: 75%;
		z-index: 5;
		display: flex;
		flex-direction: column;
		.control-deck-view{
			position: absolute;
			height: 85%;
			top: 15%;
			left: 0;
			width: 6%;
			background-repeat: no-repeat;
			background-image: url(@/assets/imgs/screen/control_deck.png);
			background-size: 100% 100%;
		}
		.small-track-row,.road-row{
			height: 1px;
			flex-grow: 1;
		}
		.small-track-row{
			.inner{
				height: 100%;
				position: relative;
			}
			.small_track-box{
				position: absolute;
				bottom: 0;
				height: 100%;
				width: 6%;
				background-repeat: no-repeat;
				background-image: url(@/assets/imgs/screen/small_track.png);
				background-size: 100% 195%;
				background-position: left bottom;
				overflow: hidden;
				display: flex;
				align-items: center;
				justify-content: center;
				img{
					height:80%;
					width: auto;
				}
			}
			.small_track-box1{
				right: 0;
			}
			.small_track-box2{
				right: 8%;
			}
		}
		.road-row{
			padding-left:8%;
			.inner{
				height: 100%;
				background-repeat: no-repeat;
				background-image: url(@/assets/imgs/screen/road.png);
				background-size: 100% 100%;
				position: relative;
				.forklift-box{
					position: absolute;
					top:0;
					left: 0;
					width: 10%;
					height: 100%;
					background-repeat: no-repeat;
					background-image: url(@/assets/imgs/screen/forklift.png);
					background-size: 100% 75%;
					background-position: center; 
					z-index: 2;
				}
			}
		}
		.empty-row{
			flex-shrink: 0;
			height: 6%;
		}
	}
}
</style>